<template>
  <!-- 微信订单页面废弃未使用 -->
  <el-dialog :visible.sync="visible" title="交易订单" :close-on-click-modal="false"
             :close-on-press-escape="false">
    <el-form :model="dataForm" :rules="dataRule" :inline="true" label-position="left" ref="dataForm" @keyup.enter.native="dataFormSubmitHandle()" label-width="120px">
      <el-form-item prop="orderState" label="订单状态">
        <div class="oneCk">
          {{getDictLabel('order_status',dataForm.orderState)}}
        </div>
      </el-form-item>
      <el-form-item prop="inComplaint" label="交易纠纷中" >
        <div class="oneCk">
          {{dataForm.inComplaint?'是':'否'}}
        </div>
      </el-form-item>
      <el-form-item prop="transactionId" label="微信订单号">
        <div class="oneCk">
          {{dataForm.transactionId}}
        </div>
      </el-form-item>
      <el-form-item prop="merchantId" label="商户号">
        <div class="oneCk">
          {{dataForm.merchantId}}
        </div>
      </el-form-item>
      <el-form-item prop="subMerchantId" label="二级商户号">
        <div class="oneCk">
          {{dataForm.subMerchantId}}
        </div>
      </el-form-item>
      <el-form-item prop="merchantTradeNo" label="内部订单号">
        <div class="oneCk">
          {{dataForm.merchantTradeNo}}
        </div>
      </el-form-item>
      <el-form-item prop="openid" label="支付者openid">
        <div class="oneCk">
          {{dataForm.openid}}
        </div>
      </el-form-item>
      <el-form-item prop="paidAmount" label="实际支付金额">
        <div class="oneCk">
          {{formatMoney(dataForm.paidAmount)}}元
        </div>
      </el-form-item>
      <el-form-item prop="tradeCreateTime" label="创建时间">
        <div class="oneCk">
          {{formatdate(dataForm.tradeCreateTime)}}
        </div>
      </el-form-item>
      <el-form-item prop="payTime" label="支付时间">
        <div class="oneCk">
          {{formatdate(dataForm.payTime)}}
        </div>
      </el-form-item>
      <el-form-item  label="发货模式" v-if="dataForm.shipping">
        <div class="oneCk">
          <!--          {{getDictLabel('delivery_mode',dataForm.shipping.deliveryMode)}}-->
          统一发货
        </div>
      </el-form-item>
      <el-form-item label="全部发货" v-if="dataForm.shipping">
        <div class="oneCk">
          {{dataForm.shipping.finishShipping?'是':'否'}}
        </div>
      </el-form-item>
      <el-form-item label="发货件数" v-if="dataForm.shipping">
        <div class="oneCk">
          {{dataForm.shipping.finishShippingCount}}
        </div>
      </el-form-item>
      <el-form-item  label="物流模式" v-if="dataForm.shipping">
        <div class="oneCk">
          {{getDictLabel('logistics_type',dataForm.shipping.logisticsType)}}
        </div>
      </el-form-item>
      <el-form-item prop="merchantTradeNo" label="内部订单号" v-if="dataForm.shipping">
        <div class="oneCk">
          {{dataForm.shipping.merchantTradeNo}}
        </div>
      </el-form-item>
    </el-form>
    <div class="flex_columns" v-if="dataForm.shipping">
      <div class="flex_between flex_center flex_wrap">
        <div  v-for="(item, index) in dataForm.shipping.shippingList">
          <el-form :model="item" :inline="true" label-position="left" label-width="120px">
            <el-form-item label="寄件人联系方式">
              <div class="oneCk">
                {{item.contact.consignorContact}}
              </div>
            </el-form-item>
            <el-form-item label="收件人联系方式">
              <div class="oneCk">
                {{item.contact.receiverContact}}
              </div>
            </el-form-item>
            <el-form-item label="快递公司ID">
              <div class="oneCk">
                <el-select v-model="item.expressCompany" disabled filterable clearable placeholder="未选择物流公司">
                  <el-option v-for="item2 in expressCompanyList" :key="item2.dictValue" :label="item2.dictLabel" :value="item2.dictValue">
                  </el-option>
                </el-select>
              </div>
            </el-form-item>
            <el-form-item label="	物流商品描述">
              <div class="oneCk">
                {{item.goodsDesc}}
              </div>
            </el-form-item>
            <el-form-item label="物流单号">
              <div class="oneCk">
                {{item.trackingNo}}
              </div>
            </el-form-item>
            <el-form-item label="物流上传时间">
              <div class="oneCk">
                {{formatdate(item.uploadTime)}}
              </div>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import debounce from 'lodash/debounce'
import {formatdate, getDictDataList, getDictLabel} from "@/utils";

export default {
  data() {
    return {
      visible: false,
      expressCompanyList:[],                 //所有物流公司信息
      dataForm: {
        description:'',                      //所有商品描述
        inComplaint:false,                   //交易纠纷中
        merchantId:'',                       //商户号
        merchantTradeNo:'',                  //内部订单号
        openid:'',                           //支付者openid
        orderState:'',                       //订单状态
        paidAmount:'',                       //实际支付金额
        payTime:'',                          //支付时间为时间戳格式
        subMerchantId:'',                    //二级商户号
        tradeCreateTime:'',                  //创建时间
        transactionId:'',                    //微信订单号
      }
    }
  },
  computed: {
    dataRule() {
      return {

      }
    }
  },
  methods: {
    getDictLabel,
    formatdate,
    init(id,userId) {
      this.visible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].resetFields()
        this.getInfo(id,userId)
        this.userOrderDelivery()
      })
    },
    // 从微信系统查询订单
    getInfo(id,userId) {
      this.$http.get(`/api/userOrder/getOrder?orderId=${id}&userId=${userId}`).then(({data: res}) => {
        //console.log(res)
        if (res.code !== 0) {
          return this.$message.error(res.msg)
        }
        this.dataForm = {
          ...this.dataForm,
          ...res.data.order
        }
      }).catch(() => {
      })
    },
    // 获取运力信息
    userOrderDelivery() {
      this.expressCompanyList = getDictDataList('delivery_list')
    },
    formatMoney(num){
      let money = num/100
      return money.toFixed(2)
    },
    // 表单提交
    dataFormSubmitHandle: debounce(function () {
    }, 1000, {'leading': true, 'trailing': false}),
  }
}
</script>
<style>
.el-upload el-upload-picture-card {
  display: none;
}
.boder{
  border: 1px solid #333333;
}
.oneCk{
  width: 300px;
}
/* 栅格布局 */
.flex {
  display: flex !important;
}

.flex_rows {
  display: flex;
  flex-direction: row !important;
}

.flex_row_reverse {
  display: flex;
  flex-direction: row-reverse !important;
}

.flex_columns {
  display: flex;
  flex-direction: column !important;
}

.flex_wrap {
  display: flex;
  flex-wrap: wrap !important;
}

.flex_nowrap {
  display: flex;
  flex-wrap: nowrap !important;
}

.flex_between {
  display: flex;
  justify-content: space-between !important;
}

.flex_around {
  display: flex;
  justify-content: space-around !important;
}

.flex_center {
  display: flex;
  align-items: center !important;
}

.flex_align_start {
  display: flex;
  align-items: flex-start !important;
}

.flex_align_center {
  display: flex;
  align-items: center !important;
}

.flex_align_end {
  display: flex;
  align-items: flex-end !important;
}

.flex_space_around {
  display: flex;
  align-content: space-around !important;
}

.flex_space_between {
  display: flex;
  align-content: space-between !important;
}

.flex_jufy_center {
  display: flex;
  align-items: center;
  justify-content: center !important;
}

</style>
